<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>京乳时鲜后台管理系统</title>
		<meta name="description" content="MilkLogisticsSystem">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="/static/assets/css/normalize.css">
		<link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/assets/css/font-awesome.min.css">
		<link rel="stylesheet" href="/static/assets/css/themify-icons.css">
		<link rel="stylesheet" href="/static/assets/css/pe-icon-7-filled.css">
		<link rel="stylesheet" href="/static/assets/css/flag-icon.min.css">
		<link rel="stylesheet" href="/static/assets/css/cs-skin-elastic.css">
		<link rel="stylesheet" href="/static/assets/css/style.css">
		<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
		{#<link href="/static/assets/weather/css/weather-icons.css" rel="stylesheet" />#}
        {#<link href="/static/assets/calendar/fullcalendar.css" rel="stylesheet" />#}
		{#<link href="/static/assets/css/charts/chartist.min.css" rel="stylesheet">#}
		{#<link href="/static/assets/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">#}
		<script src="/static/assets/js/datatables/js/jquery.js"></script>
		{#<script src="/static/assets/js/vendor/jquery-2.1.4.min.js"></script>#}

		<style>
			#weatherWidget .currentDesc {
				color: #ffffff!important;
			}
			
			.traffic-chart {
				min-height: 335px;
			}
			
			#flotPie1 {
				height: 150px;
			}
			
			#flotPie1 td {
				padding: 3px;
			}
			
			#flotPie1 table {
				top: 20px!important;
				right: -10px!important;
			}
			
			.chart-container {
				display: table;
				min-width: 270px;
				text-align: left;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			#flotLine5 {
				height: 105px;
			}
			
			#flotBarChart {
				height: 150px;
			}
			
			#cellPaiChart {
				height: 160px;
			}
			
			table.dataTable tbody tr.selected {
				background-color: #B0BED9;
			}
			/* modal会在body上加一个padding */
			
			body {
				padding-right: 0 !important;
			}
			
			body.modal-open {
				overflow-y: scroll;
				padding-right: 0 !important;
			}
			
			.navbar .navbar-nav li.menu-item-has-children ul li.active a,
			.navbar .navbar-nav li.menu-item-has-children ul li.active a i {
				color: #03a9f3;
			}
		</style>
	</head>

	<body>
		<!-- Left Panel -->
		<aside id="left-panel" class="left-panel">
			<nav class="navbar navbar-expand-sm navbar-default">
				<div id="main-menu" class="main-menu collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li id="index" style="display: none">
							<a href="{% url 'index' %}"><i class="menu-icon fa fa-laptop"></i>主页 </a>
						</li>

						<li class="menu-item-has-children dropdown" id="purchase" style="display: none">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="p_toggle"> <i class="menu-icon fa fa-suitcase"></i>采购管理</a>
							<ul class="sub-menu children dropdown-menu" id="purchase_sub">
								<li id="purchase_info">
									<a href="{% url 'purchase_info' %}"><i class="fa fa fa-table"></i>采购订单查看</a>
								</li>
								<li id="add_demand">
									<a href="{% url 'add_demand' %}"><i class=" fa fa-plus"></i>采购订单生成</a>
								</li>
								<li id="supplier">
									<a href="{% url 'milk_src_view' %}"><i class="fa fa fa-table"></i>奶源地查看</a>
								</li>
							</ul>
						</li>

                        <li class="menu-item-has-children dropdown" id="warehouseManage" style="display: none">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="w_toggle"> <i class="menu-icon fa fa-home"></i>库存管理</a>
							<ul class="sub-menu children dropdown-menu" id="warehouse_sub">
                                <li id="warehouse">
                                    <a href="{% url 'warehouse' %}"><i class="fa fa-home"></i>库存信息查看</a>
						        </li>
                                <li id="expired">
							        <a href="{% url 'expired' %}"><i class="fa fa-clock-o"></i>过期商品管理</a>
						        </li>
						        <li id="add_goods">
							        <a href="{% url 'add_goods' %}"><i class="fa fa-plus"></i>新增商品处理</a>
						        </li>
							</ul>
						</li>

                        <li id="sales" style="display: none">
							<a href="{% url 'sales_order' %}"><i class="menu-icon fa fa-suitcase"></i>销售管理</a>
						</li>

                        <li class="menu-item-has-children dropdown" id="trucks" style="display: none">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="trucks_toggle"> <i class="menu-icon fa fa-truck"></i>车辆管理</a>
							<ul class="sub-menu children dropdown-menu" id="trucks_sub">
								<li id="invoice_info">
									<a href="{% url 'invoice_info' %}"><i class="fa fa fa-table"></i>发货单信息查看</a>
								</li>
								<li id="avai_trucks">
									<a href="{% url 'avai_trucks_info' %}"><i class="fa fa fa-truck"></i>可用车辆状态查看</a>
								</li>
								<li id="schedule_manage">
									<a href="{% url 'schedule_manage' %}"><i class="fa fa fa-table"></i>调度管理</a>
								</li>
								<li id="real_time_location">
									<a href="{% url 'real_time_location' %}"><i class="fa fa fa-map-marker"></i>调度实时监控</a>
								</li>
								<li id="exception_handle_info">
									<a href="{% url 'exception_handle_info' %}"><i class="fa fa-exclamation-triangle"></i>异常处理</a>
								</li>
								<li id="service_info">
									<a href="{% url 'service_info' %}"><i class="fa fa fa-cogs"></i>维修车辆状态查看</a>
								</li>
								<li id="scrap_info">
									<a href="{% url 'scrap_info' %}"><i class="fa fa fa-cogs"></i>报废车辆信息查看</a>
								</li>
								<li id="truck_asset_manange">
									<a href="{% url 'truck_asset_manage' %}"><i class="fa fa fa-truck"></i>车辆资产管理</a>
								</li>
							</ul>
						</li>
                        <li id="notification" style="display: none">
							<a href="{% url 'notification' %}"><i class="menu-icon fa fa-bell-o"></i>通知信息 </a>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
		</aside>
        <script>
            // 负责左边导航栏不同角色差异化展示
			$.ajax({
				url: "{% url 'get_occupation' %}",
				type: "GET",
				success: function(data) {
					if(data.occupation === "超级管理员") {
						$("#index,#warehouse,#trucks,#notification,#sales,#expired,#add_goods,#purchase,#warehouseManage").show();
					} else if(data.occupation === "采购") {
						$("#index,#notification,#purchase").show();
					}
				}
			});
        </script>
		<!-- /#left-panel -->
		<!-- Right Panel -->
		<div id="right-panel" class="right-panel" style="position: relative;padding-bottom: 90px">
			<!-- Header-->
			<header id="header" class="header">
				<div class="top-left">
					<div class="navbar-header">
						<a class="navbar-brand" href="{% url 'index' %}"><img src="/static/images/logo.png" alt="Logo"></a>
						<a class="navbar-brand hidden" href="./"><img src="/static/images/logo2.png" alt="Logo"></a>
						<a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
					</div>
				</div>
				<div class="top-right">
					<div class="header-menu">
						<div class="header-left">

							<div class="dropdown for-notification">
								<button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-bell" id="note_count1"></i>
                            </button>
								<div class="dropdown-menu" aria-labelledby="notification" id="note_div">
									<p class="red" id="note_count2"></p>
								</div>
							</div>

						</div>

						<div class="user-area dropdown float-right">
							<a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<img class="user-avatar rounded-circle" src="/static/images/admin.jpg" alt="User Avatar">
							</a>

							<div class="user-menu dropdown-menu">
								<a class="nav-link" href="#"><i class="fa fa-fw fa-user"></i>个人信息</a>

								<a class="nav-link" href="{% url 'notification' %}"><i class="fa fa-fw fa-bell"></i>通知信息</a>

								<a class="nav-link" href="{% url 'login' %}?logout=true"><i class="fa fa-fw fa-power-off"></i>退出</a>
							</div>
						</div>

					</div>
				</div>
			</header>
			<!-- /#header -->
			<!-- Content -->
			{% block content %}
			<div class="content">
				<!-- Animated -->
				<div class="animated fadeIn">
					<!-- Widgets  -->
					<h5>个人信息</h5><hr />
					<div class="row">
						<div class="col-lg-3 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-1">
											<i class="pe-7s-user"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text">{{ name }}</div>
												<div class="stat-heading">姓名</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-2">
											<i class="pe-7s-browser"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text">{{ job }}</div>
												<div class="stat-heading">职位</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-3">
											<i class="pe-7s-id"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text">{{ number }}</div>
												<div class="stat-heading">工号</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-4">
											<i class="pe-7s-phone"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text" style="word-break: break-all;word-wrap: break-word">{{ phone }}</div>
												<div class="stat-heading">联系电话</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<h5>仓库情况</h5><hr />
					<div class="row">
						<div class="col-lg-4 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-6">
											<i class="pe-7s-home"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text">{{ warehouse }}</div>
												<div class="stat-heading">管理仓库</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-4 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib">
											<i class="ti-link"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib" style="width:70%">
												<div>{{cap.vol}}/{{cap.total}}</div>
												<div class="progress mb-2" style="height: 5px; width:100%">
                                        			<div class="progress-bar bg-flat-color-1" role="progressbar" style="width: {{ cap.rate }}%;" aria-valuenow="cap.rate" aria-valuemin="0" aria-valuemax="100"></div>
                                    			</div>
												<div class="stat-heading">仓库容量情况</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<h5>采购/销售信息</h5><hr/>
					<div class="row">
						<div class="col-lg-3 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-2">
											<i class="pe-7s-cart"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text">{{ sales }}</div>
												<div class="stat-heading">待处理销售订单</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="stat-widget-five">
										<div class="stat-icon dib flat-color-2">
											<i class="ti-layout-grid2 text-warning border-warning"></i>
										</div>
										<div class="stat-content">
											<div class="text-left dib">
												<div class="stat-text">{{ demand }}</div>
												<div class="stat-heading">待处理需求单</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<h5>收入统计</h5><hr	 />
					<div class="row">
						<div class="col-lg-6 col-md-6">
							<div class="card">
								<div class="card-body">
									<canvas id="profit-chart"></canvas>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- .animated -->
				<script>
					$("#index").addClass("active");
				</script>
                <script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
                <script>
                    ( function ( $ ) {
                        var ctx = document.getElementById( "profit-chart" );
                        ctx.height = 150;
                        var myChart = new Chart( ctx, {
                            type: 'line',
                            data: {
                                labels: [ "2012", "2013", "2014", "2015", "2016", "2017", "2018" ],
                                type: 'line',
                                defaultFontFamily: 'Montserrat',
                                datasets: [ {
                                    data: [ 790657, 842240, 846012, 900045, 940025, 952421, 1024542 ],
                                    label: "支出",
                                    backgroundColor: 'rgba(200,0,155,.35)',
                                    borderColor: 'rgba(200,0,155,0.60)',
                                    borderWidth: 3.5,
                                    pointStyle: 'circle',
                                    pointRadius: 5,
                                    pointBorderColor: 'transparent',
                                    pointBackgroundColor: 'rgba(200,0,155,0.60)',
                                        },
                                        {
                                    data: [ 890657, 942240, 946012, 1000045, 1140025, 1052421, 1324542 ],
                                    label: "收入",
                                    backgroundColor: 'rgba(0,194,146,.25)',
                                    borderColor: 'rgba(0,194,146,0.5)',
                                    borderWidth: 3.5,
                                    pointStyle: 'circle',
                                    pointRadius: 5,
                                    pointBorderColor: 'transparent',
                                    pointBackgroundColor: 'rgba(0,194,146,0.5)',
                                        }, ]
                            },
                            options: {
                                responsive: true,
                                tooltips: {
                                    mode: 'index',
                                    titleFontSize: 12,
                                    titleFontColor: '#000',
                                    bodyFontColor: '#000',
                                    backgroundColor: '#fff',
                                    titleFontFamily: 'Montserrat',
                                    bodyFontFamily: 'Montserrat',
                                    cornerRadius: 3,
                                    intersect: false,
                                },
                                legend: {
                                    display: false,
                                    position: 'top',
                                    labels: {
                                        usePointStyle: true,
                                        fontFamily: 'Montserrat',
                                    },


                                },
                                scales: {
                                    xAxes: [ {
                                        display: true,
                                        gridLines: {
                                            display: false,
                                            drawBorder: false
                                        },
                                        scaleLabel: {
                                            display: false,
                                            labelString: 'Month'
                                        }
                                            } ],
                                    yAxes: [ {
                                        display: true,
                                        gridLines: {
                                            display: false,
                                            drawBorder: false
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: '单位/元'
                                        }
                                            } ]
                                },
                                title: {
                                    display: false,
                                }
                            }
                        } );})( jQuery );
                </script>
			</div>
			{% endblock %}

			<!-- /.content -->
			<div class="clearfix"></div>
			<!-- Footer -->
			<footer class="site-footer" style="position: absolute;width: 100%;bottom: 0">
				<div class="footer-inner bg-white">
					<div class="row">
						<div class="col-sm-6">
							京乳时鲜，专注于京城新鲜乳品配送。
						</div>
						<div class="col-sm-6 text-right"> For SAD Use Only
						</div>
					</div>
				</div>
			</footer>
			<!-- /.site-footer -->
		</div>
		<script>
			jQuery(document).ready(function($) {
				$("#right-panel").css("min-height", $(window).height() - 55 + "px");
				$(window).resize(function() {
					$("#right-panel").css("min-height", $(window).height() - 55 + "px")
				});
				$.ajax({
					url: "{% url 'notification' %}",
					type: "GET",
					dataType: "json",
					data: {
						"type": "display"
					},
					success: function(data) {
						$("#note_count1").after("<span class=\"count bg-danger\">" + data.count + "</span>");
						$("#note_count2").text("您有" + data.count + "条通知");
						for(var note of JSON.parse(data.note_list)) {
							if(note.fields.n_type === "1") {
								$("#note_div").append("<a class=\"dropdown-item media\" href=\"{% url 'notification' %}\">\n" +
									"                                    <i class=\"fa fa-fw fa-warning\"></i>\n" +
									"                                    <p>" + note.fields.n_content + "</p>\n" +
									"                                </a>")
							} else if(note.fields.n_type === "2") {
								$("#note_div").append("<a class=\"dropdown-item media\" href=\"{% url 'notification' %}\">\n" +
									"                                    <i class=\"fa fa-fw fa-info-circle\"></i>\n" +
									"                                    <p>" + note.fields.n_content + "</p>\n" +
									"                                </a>")
							} else if(note.fields.n_type === "4") {
								$("#note_div").append("<a class=\"dropdown-item media\" href=\"{% url 'notification' %}\">\n" +
									"                                    <i class=\"fa fa-fw fa-truck\"></i>\n" +
									"                                    <p>" + note.fields.n_content + "</p>\n" +
									"                                </a>")
							}
						}
						if(data.count > 4) {
							$("#note_div").append("<a class=\"dropdown-item media\" href=\"{% url 'notification' %}\">\n" +
								"                                    <i class=\"fa fa-fw\"></i>\n" +
								"                                    <p>······</p>\n" +
								"                                </a>")
						}
					}

				})
                {% if messages %}
                    {% for msg in messages %}
                    alert('{{ msg.message }}');
                    {% endfor %}
                {% endif %}
            });
		</script>

		<!-- /#right-panel -->
		{% block css_js_2 %}
		
		<script src="/static/assets/js/popper.min.js"></script>
		<script src="/static/assets/js/plugins.js"></script>
		<script src="/static/assets/js/main.js"></script>
        {% endblock %}

		<!--Local Stuff-->
	</body>

</html>